<template>
  <div class="app-container">
    <el-card shadow="hover" class="search_card">
      <div>
        <i class="el-icon-search" />
        <span>筛选搜索</span>
        <el-button
          style="margin-left: 20px;"
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="search"
        >
          搜索
        </el-button>
        <el-button
          size="small"
          icon="el-icon-refresh-right"
          @click="cancelData"
        >
          重置
        </el-button>
      </div>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-form
          ref="params"
          :model="params"
          label-width="100px"
          size="small"
          class="searchForm"
        >
          <el-col :span="6">
            <el-form-item label="视频名称:" prop="name">
              <el-input
                v-model="params.name"
                size="small"
                clearable
                @clear="search"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="选择课程：" prop="courseId">
              <el-select
                filterable
                v-model="params.courseId"
                placeholder="请选择"
                @change="search"
                clearable
              >
                <el-option
                  v-for="item in CourseOptions"
                  :key="item.id"
                  :label="item.courseName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <el-card shadow="hover" style="margin-top: 20px;">
      <div class="container">
        <i class="el-icon-s-order"></i>
        <span class="mr20">视频列表</span>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          class="mr10"
          v-hasPermi="['school:videoList:add']"
          >新增</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd1"
          class="mr10"
          v-hasPermi="['school:videoList:add']"
          >批量新增</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          class="handle-del mr10"
          size="small"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['school:videoList:del']"
          >批量删除</el-button
        >

        <el-table
          v-loading="loading"
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            label="视频名称"
            prop="name"
            min-width="200"
            align="center"
          ></el-table-column>
          <el-table-column label="所属课程" align="center" width="150">
            <template slot-scope="scope">
              {{getCourseName(scope.row.courseId)}}
            </template>
          </el-table-column>
          <el-table-column label="视频封面" align="center" width="140">
            <template slot-scope="scope">
              <img :src="showUrl + scope.row.pic" alt="" class="study_pic" />
            </template>
          </el-table-column>
          <el-table-column
            label="视频集数"
            width="100"
            align="center"
            prop="videoSort"
          ></el-table-column>
          <!-- <el-table-column
            prop="detail"
            label="课程介绍"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column> -->

          <el-table-column label="创建时间" align="center" min-width="160">
            <template slot-scope="scope">{{
              formatDate(scope.row.createTime)
            }}</template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="260"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-video-camera-solid"
                @click="showVideo(scope.$index, scope.row)"
              >
                视频
              </el-button>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
                v-hasPermi="['school:videoList:update']"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['school:videoList:del']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <pagination
            v-show="pageTotal > 0"
            :total="pageTotal"
            :page.sync="params.pageNum"
            :limit.sync="params.pageSize"
            @pagination="fetchVideoList"
          />
        </div>
      </div>
    </el-card>
    <!-- 批量上传弹窗 -->
    <el-dialog :title="title666" :visible.sync="dialogVisible1"  width="70%">
      <el-form
        :rules="rules2"
        ref="ruleForm"
        :model="formData"
        label-width="120px"
        size="small"
        class="form-box"
        style="padding:0 20px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="选择课程：" prop="courseId">
              <el-select
                filterable
                v-model="formData.courseId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in CourseOptions"
                  :key="item.id"
                  :label="item.courseName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>          
          <el-col :span="24">
            <el-form-item  v-loading="loading1"  label="批量上传：">
              <el-table border :data="formData.childrenList" style="width: 100%">
                <el-table-column align="center" prop="name" label="视频名称：" >
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="排序：" width="180">
                  <template slot-scope="scope">
                    <el-input-number
                      v-model="scope.row.videoSort"
                      controls-position="right"
                      :min="1"
                    />
                  </template>
                </el-table-column>
                <el-table-column align="center" label="视频封面：">
                  <template slot-scope="scope">
                    <el-upload
                      :headers="headers"
                      :action="`${baseUrl}/mba/course/upload`"
                      :show-file-list="false"
                      :on-success="uploadPicUrl1"
                      class="avatar-uploader"
                      accept=".jpg,.jpeg,.png,.gif"
                    >
                      <img
                        v-if="scope.row.pic"
                        :src="showUrl + scope.row.pic"
                        class="avatar"
                      />
                      <el-button v-else size="small" type="primary" @click="curRowIndex=scope.$index">点击上传</el-button>
                    </el-upload>
                  </template>
                </el-table-column>
                <el-table-column  align="center" label="视频">
                  <template slot-scope="scope">
                      <!-- :action="`${baseUrl}/mba/course/upload`" -->
                      <!-- :on-success="uploadPicUrl2" -->
                    <!-- <el-upload
                      action
                      :headers="headers"
                      :http-request="Uploadp1"
                      :show-file-list="false"
                      class="avatar-uploader"
                      :before-upload="beforeUploadVideo"
                    > -->
                        <!-- :http-request="Uploadp1(file)" -->
                      <el-upload
                        ref="upVideo"
                        action
                        class="upload-demo"
                        :http-request="(params)=&gt;Uploadp1(params,scope.$index)"
                        :show-file-list="false"
                        :on-preview="handlePreviewp"
                        :before-upload="beforeAvatarUploadp"
                      >
                        <!-- :before-remove="beforeRemovep" -->
                        <!-- :on-remove="handleRemovep"
                        :on-success="handleSuccessp"
                        :on-exceed="handleExceedp" -->
                      <video
                        v-if="scope.row.videoUrl"
                        :src="showUrl + scope.row.videoUrl"
                        class="avatar"
                      ></video>
                      <el-button v-else size="small" type="primary" @click="curRowIndex=scope.$index">点击上传</el-button>
                    </el-upload>
                  </template>
                </el-table-column>
              </el-table>
              <div class="sc_table_icon" >
                <img src="@/assets/images/add.png" @click="addmanagement2" />
                <img src="@/assets/images/jian.png" @click="delmanagement2" />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false" size="small">取消</el-button>
        <el-button @click="submitForm" type="primary" size="small"
          >确定</el-button
        >
      </span>
                    <!-- <el-upload :action="`${baseUrl}/mba/course/upload`" :file-list="form.pic" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog> -->
    </el-dialog>
    <!-- 新增编辑 -->
    <el-dialog :title="title666" :visible.sync="dialogVisible" width="53%">
      <el-form
        :rules="rules2"
        ref="ruleForm"
        :model="formData"
        label-width="120px"
        size="small"
        class="form-box"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="视频名称：" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="课程分类：" prop="courseCate">
              <treeselect
                v-model="formData.courseCate"
                :options="loadOptions"
                :normalizer="normalizer"
                placeholder="请选择课程分类"
                style="width: 260px;"
              />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="24">
            <el-form-item label="视频时长" prop="time">
              <el-input v-model="formData.time"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="选择课程：" prop="courseId">
              <el-select
                filterable
                v-model="formData.courseId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in CourseOptions"
                  :key="item.id"
                  :label="item.courseName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序：" prop="videoSort">
              <el-input-number
                v-model="formData.videoSort"
                controls-position="right"
                :min="1"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="课程介绍：" prop="detail">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2 }"
                v-model="formData.detail"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="视频封面：" prop="pic">
              <el-upload
                :headers="headers"
                :action="`${baseUrl}/mba/course/upload`"
                :show-file-list="false"
                :on-success="uploadPicUrl"
                class="avatar-uploader"
                accept=".jpg,.jpeg,.png,.gif"
              >
                <img
                  v-if="formData.pic"
                  :src="showUrl + formData.pic"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="课程视频：" prop="videoUrl">
              <!-- <el-upload
                class="avatar-uploader"
                :headers="headers"
                :action="`${baseUrl}/mba/course/upload`"
                :data="{ FoldPath: '上传目录', SecretKey: '安全验证' }"
                :on-progress="uploadVideoProcess"
                :on-success="handleVideoSuccess"
                :before-upload="beforeUploadVideo"
                :show-file-list="false"
              >
                <video
                  v-if="formData.videoUrl != '' && !videoFlag"
                  :src="showUrl + formData.videoUrl"
                  class="avatar video-avatar"
                  controls="controls"
                >
                  您的浏览器不支持视频播放
                </video>
                <i
                  v-else-if="formData.videoUrl == '' && !videoFlag"
                  class="el-icon-plus avatar-uploader-icon"
                ></i>
                <el-progress
                  v-if="videoFlag == true"
                  type="circle"
                  :percentage="videoUploadPercent"
                  style="margin-top: 7px"
                ></el-progress>
              </el-upload> -->

              <el-upload
                ref="upVideo"
                action
                :http-request="Uploadp"
                :before-upload="beforeAvatarUploadp"
                :on-preview="handlePreviewp"
                :before-remove="beforeRemovep"
                :on-remove="handleRemovep"
                :on-success="handleSuccessp"
                :on-exceed="handleExceedp"
                drag
                :show-file-list="false"
                :file-list="fileListp"
              >
              
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
                <div slot="tip" class="el-upload__tip" style="font-size:14px">只能上传MP4 /QLV / FLV文件 上传文件大小不能超过1G<el-link @click="video_move" style="margin-left:10px" type="danger">取消上传<i class="el-icon-close el-icon--right"></i></el-link></div>
                <div slot="tip" class="el-upload__tip" v-if="formData.videoUrl" style="color:#1890ff;font-size:14px">[ 视频已上传,在操作栏点击视频可预览 ]</div>
                <div slot="tip" class="el-upload__tip" v-else style="font-size:14px">暂无视频,请上传视频</div>
              </el-upload>
              <el-progress
                v-show="showProgress"
                :text-inside="true"
                :stroke-width="15"
                :percentage="progress"
              ></el-progress>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
        <el-button @click="submitForm" type="primary" size="small"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="VideoVisible" width="55%">
      <video
        id="video"
        :poster="showUrl+videoForm.pic"
        :src="showUrl+videoForm.videoUrl"
        controls
        controlslist="nodownload"
        disablePictureinPicture
        x5-playsinline
        playsinline
        webkit-playsinline="true"
        style="width: 100%;height:100%;"
      >
        your browser does not support the video tag
      </video>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryCourseCate,
  queryCourseList,
  queryVideoList,
  addVideo,
  updateVideo,
  delVideo,
  getAliOSSConfig
} from "@/api/school/school";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { client , getFileNameUUID  } from "@/utils/alioss"; //oss的封装函数
export default {
  components: { Treeselect },
  props: [],
  data() {
    return {
      dialogVisible1:false,
      headers: { Authorization: "Bearer " + getToken() },
      baseUrl: process.env.VUE_APP_BASE_API,
      fileListp: [],//文件列
      showProgress: false,//进度条的显示
      dialogImageUrl: '',
      dialogVisible: false,
      dataObj: {
        region: 'oss-cn-beijing',
        accessKeyId: undefined,
        accessKeySecret:  undefined,
        bucket: '9001rzsxy',
        stsToken: undefined,
        secure:true
      }, //存签名信息
      progress: 0, //进度条数据
      // 删除专用
      multiple: true,
      ids: [],
      openFlag: true,

      CourseOptions: [],
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,

      orderNum_show: false,
      examine: false,
      title666: "",
      rules2: {
        name: [{ required: true, message: "请输入视频名称", trigger: "blur" }],
        courseId: [{ required: true, message: "请选择课程", trigger: "blur" }],
        videoSort: [{ required: true, message: "请输入排序", trigger: "blur" }],
        detail: [
          { required: true, message: "请输入课程介绍", trigger: "blur" }
        ],
        pic: [{ required: true, message: "请上传图片", trigger: "blur" }],
        videoUrl: [
          { required: true, message: "请上传课程视频", trigger: "blur" }
        ]
      },
      input: "",
      openFlag: true,
      loading: true,
      loading1:false,
      //数据
      tableData: [],
      params: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        courseId: undefined
      },
      pageTotal: 0,
      dialogVisible: false, // 是否展示编辑页面
      VideoVisible: false, // 是否展示视频
      title: "",
      // 新增/编辑数据
      formData: {
        pic: "",
        videoUrl: "",
        childrenList:[1]
      },
      videoForm: {},
      paramsFlag: 0,
      // 图片index
      curRowIndex:null
    };
  },
  watch: {
    // "formData.courseCate": "currCateChange",
    $route(to, from) {
      console.log(from);
      // if(from.name == ""){
      //   this.fetchVideoList();
      // }
    }
  },
  computed: {},
  created() {
    this.fetchVideoList();
    this.fetchCourse();
  },
  mounted() {},
  watch: {},
  methods: {
    process() {
      console.log(1)
    },
    /**
     * 所有分片切片上传代码
     */
    video_move(){
      console.log(132)
      this.$refs.upVideo.abort();
    },
    handleExceedp(files, fileList) {
      this.$message.warning(`每次只能上传1个文件`);
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreviewp(file) {},
    // 删除文件之前的钩子
    beforeRemovep(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
      // const isLt50M = file.size / 1024 / 1024 < 50;
      if (['video/mp4', 'video/qlv','video/flv'].indexOf(file.type) == -1) {
        this.$message.error('上传视频只能是 MP4  QLV. FLV 格式!');
        return false;
      }
      // if (!isLt50M) {
      //   this.$message.error('上传视频大小不能超过 50MB!');
      //   return false;
      // }
      return true;
    },
    // 文件列表移除文件时的钩子
    handleRemovep(file, fileList) {
      console.log('文件移除',this.fileListp);
    },
    // 文件上传成功时的钩子
    handleSuccessp(response, file, fileList) {
      this.fileListp = fileList;
      console.log(response,file,fileList)
    },
    //文件上传前的校验
    beforeAvatarUploadp(file) {
      const isLt100M = file.size / 1024 / 1024 < 1024;
      const isLt30 = file.name.length < 30;
      // if (["video/mp4"].indexOf(file.type) == -1) {
      //   this.$message.error("请上传正确的视频格式");
      //   return false;
      // }
      if (!isLt100M) {
        this.$message.error("上传视频大小不能超过1G!");
        return false;
      }
      if (!isLt30) {
        this.$message.error("上传视频文件名称长度必须要小于30个文字哦!");
        return false;
      }
	  // 请求后台接口拿配置参数
      console.log(123);
      return new Promise((resolve, reject) => {
        getAliOSSConfig()
          .then(response => {
            console.log(response,'返回oss结果');
            this.dataObj.accessKeyId=response.data.accessKeyId; //接口返回配置参数
            this.dataObj.accessKeySecret=response.data.accessKeySecret; //接口返回配置参数
            this.dataObj.stsToken=response.data.securityToken; //接口返回配置参数
            resolve(true);
          })
          .catch(err => {
            console.log(err);
            reject(false);
          });
      });
      
    },
    // http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现 
    Uploadp(file) {
      const that = this;
      console.log(file,'需要的参数');
      async function multipartUpload() {
        let temporary = file.file.name.lastIndexOf(".");
        let fileNameLength = file.file.name.length;
        let fileFormat = file.file.name.substring(
          temporary + 1,
          fileNameLength
        );
        let fileName = getFileNameUUID() + "." + fileFormat; 
        client(that.dataObj)
          .multipartUpload(`videoTest/${fileName}`, file.file, {
            progress: function(p) {
              //p进度条的值
              // console.log(p);
              that.showProgress = true;
              that.progress = Math.floor(p * 100);
            }
          })
          .then(result => {
            //上传成功返回值
            console.log(result);
            that.formData.videoUrl = '/'+result.name;
            that.$message.success("上传视频成功");
          })
          .catch(err => {
            console.log("err---------------:", err);
            that.$message.error("上传失败请重新上传");
          });
      }
      multipartUpload();
    },
        // http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现 
    Uploadp1(file,index) {
      const that = this;
      that.loading1 = true
      // this.curRowIndex = index
      async function multipartUpload1() {
        let temporary = file.file.name.lastIndexOf(".");
        let fileNameLength = file.file.name.length;
        let fileFormat = file.file.name.substring(
          temporary + 1,
          fileNameLength
        );
        let fileName = getFileNameUUID() + "." + fileFormat; 
        console.log(that.dataObj)
        client(that.dataObj)
          .multipartUpload(`videoTest/${fileName}`, file.file, {
            progress: function(p) {
              //p进度条的值
              // console.log(p);
              that.showProgress = true;
              that.progress = Math.floor(p * 100);
            }
          })
          .then(result => {
            //上传成功返回值
            console.log(result);
            that.formData.childrenList[that.curRowIndex].videoUrl = '/'+result.name;
            that.loading1 = false
            that.$message.success("上传视频成功");
          })
          .catch(err => {
            console.log("err---------------:", err);
            that.$message.error("上传失败请重新上传");
          });
      }
      multipartUpload1();
    },
  /**结束 */
    showVideo(index, row) {
      console.log(row)
      this.VideoVisible = true;
      this.title = row.name;
      this.videoForm = row;
    },
    // 处理时间格式化
    formatDate(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },

    // 处理课程分类数据结构
    normalizer(node) {
      if (node.children == null || node.children == "null") {
        delete node.children;
      }
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.categoryName,
        children: node.children
      };
    },

    // currCateChange(val){
    //   console.log('currCateChange',val)
    //   if(val){
    //     this.fetchCourse();
    //   }
    // },
    addmanagement2() {
      this.formData.childrenList.push({

      });
    },
    delmanagement2() {
      this.formData.childrenList.splice(this.formData.childrenList.length - 1, 1);
    },
    // 根据id获取课程
    fetchCourse() {
      queryCourseList({
        pageNum: 1,
        pageSize: 10001
      }).then(res => {
        console.log(res);
        this.CourseOptions = res.rows;
      });
    },

    getCourseName(id){
      let cate = this.CourseOptions.find(item => {
        return item.id == id;
      })
      if(cate != undefined){
        return cate.courseName;
      }
    },

    //获取数据
    fetchVideoList() {
      queryVideoList(this.params)
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            this.tableData = res.rows;
            this.pageTotal = res.total;
            this.loading = false;
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    // 触发搜索按钮
    search() {
      this.params.pageNum = 1;
      this.paramsFlag = 0;
      this.fetchVideoList();
    },
    // 分页导航
    handlePageChange(val) {
      this.params.pageNum = val;
      this.fetchVideoList();
    },
    openSearch() {
      this.openFlag = !this.openFlag;
    },
    orderNum(e) {
      console.log(e);
    },
    uploadPicUrl(res) {
      this.formData.pic = res.data;
    },
    uploadPicUrl1(res) {
      this.formData.childrenList[this.curRowIndex].pic = res.data;
      console.log(this.formData)
    },
    uploadPicUrl2(res) {
      this.formData.childrenList[this.curRowIndex].videoUrl = res.data;
    },
    //上传前回调
    beforeUploadVideo(file) {
      // var fileSize = file.size / 1024 / 1024 < 500;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov",
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      // if (!fileSize) {
      //   this.$message.error("视频大小不能超过500MB");
      //   return false;
      // }
      console.log('1')
      this.loading1 = true
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;

      if (res.code == 200) {
        this.formData.videoUrl = res.data;
        this.$message.success("上传视频成功");
      } else {
        this.$message.error("上传视频失败");
      }
    },
    // 节点单击事件
    handleNodeClick(e) {
      console.log(e.id);
      this.queryParams.deptId = e.id;
      this.queryParams.companyId = undefined;
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // 新增修改的方法
    submitForm() {
      console.log(this.formData, "要提交的表单数据");
      if (this.title666 == "新增"||this.title666 == '批量新增') {
        addVideo(this.formData).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success(`新增成功`);
            this.dialogVisible = false;
            this.dialogVisible1 = false;
            this.fetchVideoList();
          } else {
            this.$message.error("新增失败");
            this.fetchVideoList();
          }
        });
      } else {
        updateVideo(this.formData).then(res => {
          if (res.code == 200) {
            this.$message.success(`修改成功`);
            this.dialogVisible = false;
            this.uploading = false;
            this.fetchVideoList();
          } else {
            this.$message.error("修改失败");
            this.fetchVideoList();
          }
        });
      }
    },
    // 重置搜索框
    cancelData() {
      this.resetForm("params");
      this.fetchVideoList();
    },
    handleAdd1() {
      this.formData = {
        pic: "",
        videoUrl: "",
        childrenList:[{videoSort:1,name:'',pic:'',videoUrl:''}]
      };
      console.log(this.formData)
      this.dialogVisible1 = true;
      this.orderNum_show = false;
      this.examine = false;
      this.title666 = "批量新增";
    },
    handleAdd() {
      this.formData = {
        pic: "",
        videoUrl: ""
      };
      this.dialogVisible = true;
      this.orderNum_show = false;
      this.examine = false;
      this.title666 = "新增";
    },
    handleEdit(index, row) {
      this.formData = row;
      this.dialogVisible = true;
      this.orderNum_show = true;
      this.examine = false;
      this.title666 = "编辑";
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
      this.single = val.length != 1;
      this.multiple = !val.length;
    },
    // 批量删除
    handleDelete(row) {
      console.log(row.id);
      const id = row.id || this.ids;
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return delVideo(id);
        })
        .then(() => {
          this.fetchVideoList();
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    }
  }
};
</script>

<style>
.handle-box {
  margin-bottom: 10px;
}
.sc_table_icon{
    height:50px;
    position: absolute;
    top:0;
    right:-19px;
}
.sc_table_icon img{
    width:18px;
    height:18px;
    display: block;
    margin-top:5px;
    cursor: pointer;
}
.table {
  width: 100%;
  font-size: 14px;
  margin-top: 20px;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #f57506;
}
.green {
  color: green;
  cursor: pointer;
}
.blue {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.mr10 {
  margin-right: 10px;
}
.searchForm .el-form-item--mini.el-form-item,
.searchForm .el-form-item--small.el-form-item {
  margin-bottom: 1px;
}
.study_pic {
  display: block;
  width: 100px;
  height: 90px;
  margin: auto;
}
.avatar-uploader .el-upload {
  border: 1px dashed #ccc;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
#video {
  text-align: center;
  margin: auto;
}
</style>
